<template>
  <div class="security">
    <div class="d-flex">
      <div class="left">
        <dv-border-box-13 :color="datavColors">
          <monitoring @openMap="openMap" :buildings="buildings"></monitoring>
        </dv-border-box-13>
        <dv-border-box-12 :color="datavColors">
          <entrance></entrance>
        </dv-border-box-12>
        <dv-border-box-12 :color="datavColors">
          <on-duty></on-duty>
        </dv-border-box-12>
      </div>
      <div class="right">
        <el-row>
          <el-col :span="12">
            <dv-border-box-13 :color="datavColors">
              <dining-hall></dining-hall>
            </dv-border-box-13>
          </el-col>
          <el-col :span="12">
            <dv-border-box-13 :color="datavColors">
              <abnormal></abnormal>
            </dv-border-box-13>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <dv-border-box-12 :color="datavColors">
              <dormitory></dormitory>
            </dv-border-box-12>
          </el-col>
          <el-col :span="12">
            <dv-border-box-11 title="校园巡课">
              <park :buildings="buildings"/>
            </dv-border-box-11>
          </el-col>
        </el-row>
      </div>
      <el-dialog v-model="dialogVisible" title="监控地图" width="1000px" draggable>
        <camera></camera>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {defineComponent,computed,ref,onMounted} from 'vue'
import {useStore} from "vuex"
import monitoring from './monitoring/index.vue'
import entrance from './entrance/index.vue'
import onDuty from './onDuty/index.vue'
import camera from './camera/index.vue'
import abnormal from './abnormal/index.vue'
import park from './park/index.vue'
import diningHall from './diningHall/index.vue'
import dormitory from './dormitory/index.vue'
import { getBuilds,} from '@/public/request/http'

export default defineComponent({
  components: {
    monitoring,
    entrance,
    onDuty,
    camera,
    abnormal,
    park,
    diningHall,
    dormitory
  },
  setup() {
    const buildings = ref([]);
    const datavColors = computed(() => useStore().state.datavColors)
    const dialogVisible = ref(false)
    const openMap = () =>{
      dialogVisible.value = true
    }

    const getCameraData = async () => {
      buildings.value = await getBuilds()
    }

    // 初始化数据
    onMounted(() => {
      getCameraData()
    })
    return { dialogVisible,openMap,datavColors,buildings,getCameraData}
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
$left-width: 660px;
.dv-border-box-10,.dv-border-box-11, .dv-border-box-12 ,.dv-border-box-13 {
  height: auto;
}
.left {
  width: $left-width;
}
.right {
  flex: 1;
}
</style>
<style>

  .el-dialog{
    background:rgb(0,0,0,0.8);
  }
  .el-dialog__body{
    padding: 0;
    color:#fff
  }
  .el-dialog__title{
    color: #ffffff;
  }
  .el-dialog__header{
    margin: 0;
    background-color: #153044;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
